<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>轮播图</title>
	<style>
		body {
			width: 100%;
			height: 100%;
			background-color: rgb(8, 58, 87);
		}

		* {
			margin: 0;
			padding: 0;
		}

		.caret-color {
			width: 300px;
			padding: 10px;
			margin-top: 20px;
			border-radius: 10px;
			border: solid 1px #ffd476;
			box-sizing: border-box;
			background-color: transparent;
			outline: none;
			color: #ffd476;
			font-size: 14px;
			/* 关键样式 */
			caret-color: #ffd476;
		}

		.caret-color::-webkit-input-placeholder {
			color: #4f4c5f;
			font-size: 14px;
		}

		a {
			text-decoration: none;
		}

		.w {
			overflow: hidden;
			position: relative;
			width: 720px;
			height: 454px;
			margin: 200px auto;
		}

		ul li {
			list-style: none;
		}

		.main .focus ul {
			position: absolute;
			left: 0;
			top: 0;
			width: 600%;
		}

		.main .focus ul li {
			float: left;
		}

		.main .focus ul li img {
			width: 720px;
		}

		a[class^="arrow"] {
			/* 开始时隐藏箭头 */
			display: none;
			z-index: 1;
			position: absolute;
			cursor: pointer;
			width: 30px;
			height: 50px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-weight: 700;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.arrow-left {
			left: 0;
			top: 45%;
			transform: translateY(-50%);
		}

		.arrow-right {
			right: 0;
			top: 45%;
			transform: translateY(-50%);
		}

		.main .focus ol {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;
			border-radius: 15px;
			background-color: rgba(255, 255, 255, 0.5);
		}

		.main .focus ol li {
			cursor: pointer;
			float: left;
			margin: 6px 6.5px;
			list-style: none;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #fff;
		}

		.main .focus .current {
			background-color: #f76211;
		}

		/* 测试flex布局 */
		.container {
			height: 100vh;
			/* 关键样式 */
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.main2 {
			/* 关键样式 */
			flex: 1;
			background-image: linear-gradient(45deg,
					#ff9a9e 0%,
					#fad0c4 99%,
					#fad0c4 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			/* 不允许文本选中的样式 */
			user-select: none;
		}

		.footer {
			padding: 15px 0;
			text-align: center;
			color: #ff9a9e;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<!-- <div class="caret-color">
		<input type="text">
	</div> -->
	<div class="main w">
		<div class="focus">
			<!-- 左边按钮 -->
			<a href="#" class="arrow-left">&lt;</a>
			<!-- 右边按钮 -->
			<a href="#" class="arrow-right">&gt;</a>
			<!-- 轮播图部分 -->
			<ul>
				<li>
					<a href="#"><img src="./1.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="./2.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="./3.jpg" alt="" /></a>
				</li>
				<li>
					<a href="#"><img src="./4.jpg" alt="" /></a>
				</li>
				<!-- 这一张的作用是为了后面做无缝链接 -->
				<li>
					<a href="#"><img src="./1.jpg" alt="" /></a>
				</li>
			</ul>
			<!-- 下面小圆点部分 -->
			<ol class="circle"></ol>
		</div>
	</div>

	<!-- <div class="container">
		<div class="main2">
			//这里为内容，只能输入数字类型：
			<input type="number">
		</div>
		<div class="footer">按钮</div>
	</div> -->
</body>
<script src="../canvas-nest.min.js"></script>
<script>
	// 滑动函数
	function moves(obj, target, callback) {
		window.clearInterval(obj.timer);
		obj.timer = window.setInterval(function () {
			var step = (target - obj.offsetLeft) / 10;
			step = step > 0 ? Math.ceil(step) : Math.floor(step);
			if (obj.offsetLeft == target) {
				window.clearInterval(obj.timer);
				if (callback) {
					callback();
				}
			} else {
				obj.style.left = obj.offsetLeft + step + "px";
			}
		}, 15);
	}
	// 移动到图片上的时候左右的箭头才显示出来 离开后又隐藏
	var focusing = document.querySelector(".focus");
	// 获取左箭头
	var arrowleft = document.querySelector(".arrow-left");
	// 获取右箭头
	var arrowright = document.querySelector(".arrow-right");
	var ul = document.querySelector("ul");
	// 获得图片张数
	var len = ul.children.length;
	// 动态生成下面的小圆点
	var ol = document.querySelector("ol");
	for (var i = 0; i < len - 1; i++) {
		var newcircle = document.createElement("li");
		ol.appendChild(newcircle);
	}
	// 把ol里面的第一个li的类名设置成current
	ol.children[0].className = "current";
	// 鼠标移动到focus的时候显示箭头
	focusing.addEventListener("mouseenter", function () {
		// 鼠标移动到图片的时候清除定时器
		window.clearInterval(timer);
		timer = null;
		arrowleft.style.display = "block";
		arrowright.style.display = "block";
	});
	// 鼠标离开又隐藏
	focusing.addEventListener("mouseleave", function () {
		// 鼠标离开又重新设置定时器
		// 自动播放轮播图
		timer = window.setInterval(function () {
			// 手动调用点击事件
			arrowright.click();
		}, 2000);
		arrowleft.style.display = "none";
		arrowright.style.display = "none";
	});
	// 给每个小圆点设置自定义属性
	for (var i = 0; i < len - 1; i++) {
		ol.children[i].setAttribute("index", i);
	}
	// 点击哪个小圆圈哪个小圆圈就变色 -排他思想
	for (var i = 0; i < len - 1; i++) {
		ol.children[i].addEventListener("click", function () {
			for (var j = 0; j < len - 1; j++) {
				ol.children[j].className = "";
			}
			// 点击第几个小圆点ul就移动小圆点坐标乘以图片宽度
			// alert(-(this.getAttribute('index') * ul.children[0].offsetWidth));
			moves(ul, -this.getAttribute("index") * ul.children[0].offsetWidth);
			num = this.getAttribute("index");
			circle = this.getAttribute("index");
			this.className = "current";
			// ul.style.left = "-720px";
		});
	}
	// 点击右边箭头 设置一个num进行移动距离
	var num = 0;
	// 点击右边的箭头小圆圈也变色
	var circle = 0;
	arrowright.addEventListener("click", function () {
		if (num == len - 1) {
			ul.style.left = 0;
			num = 0;
			circle = 0;
		}
		num++;
		moves(ul, -num * ul.children[0].offsetWidth);
		circle++;
		for (var i = 0; i < len - 1; i++) {
			ol.children[i].className = "";
		}
		// 在加到最后一张重复图片的时候就把第一个圆点变色
		if (circle == len - 1) {
			// alert('haha')
			ol.children[0].className = "current";
		}
		ol.children[circle].className = "current";
	});
	// 点击左边箭头
	arrowleft.addEventListener("click", function () {
		if (num == 0) {
			num = len - 1;
			ul.style.left = -num * ul.children[0].offsetWidth;
			circle = len - 1;
		}
		num--;
		moves(ul, -num * ul.children[0].offsetWidth);
		circle--;
		for (var i = 0; i < len - 1; i++) {
			ol.children[i].className = "";
		}
		// 在减到最后一张重复图片的时候就把第一个圆点变色
		if (circle == 0) {
			// alert('haha')
			ol.children[0].className = "current";
		}
		ol.children[circle].className = "current";
	});
	// 自动播放轮播图
	var timer = window.setInterval(function () {
		// 手动调用点击事件
		arrowright.click();
	}, 2000);
</script>

</html>